<template>
  <div>
    <el-dialog title="接口数据源" :close-on-click-modal="false" :visible.sync="databaseFormVisible" :before-close="handelCancel" width="1000px">
      <el-dialog title="选择" :visible.sync="innerVisible " append-to-body width="70%">
        <el-scrollbar wrapClass="scrollbar-wrapper">
          <interface-list-choose :v-model="chooseObj" @handelChoose="handelChoose" @close="close"></interface-list-choose>
        </el-scrollbar>
      </el-dialog>
      <el-scrollbar style="height:100%">
        <div class="interface">
          <el-divider content-position="left">基本设置</el-divider>
          <div class="formBox">
            <znxd-form ref="formBasic" v-model="formData" :formColumn="formColumnBasic" :formRules="formRulesBasic" :initData="initData"></znxd-form>
            <!-- <el-form :model="formData" label-width="120px">
              <el-form-item label="返回路径">
                <el-input v-model="formData.resultPath" style="width:500px;"></el-input>
              </el-form-item>
            </el-form>-->
            <el-tabs v-model="activeName" type="border-card">
              <el-tab-pane label="参数设置" name="first">
                <znxd-list-modify ref="paramSet" v-model="formData.requestParams" :formColumn="formColumnParams" mode="addAndDelete" :initData="initData.requestParams"></znxd-list-modify>
              </el-tab-pane>
              <el-tab-pane label="header设置" name="second">
                <znxd-list-modify ref="headerSet" v-model="formData.requestHeader" :formColumn="formColumnHeader" mode="addAndDelete" :initData="initData.requestHeader"></znxd-list-modify>
              </el-tab-pane>
            </el-tabs>
          </div>
          <el-divider content-position="left">高级设置</el-divider>
          <div class="formBox">
            <el-form ref="formAdvance" :model="formData" label-width="120px">
              <el-form-item label="分页参数设置">
                <el-switch v-model="formData.isSetPage" :inactive-value="0" :active-value="1"></el-switch>
              </el-form-item>
              <el-form-item v-if="formData.isSetPage===1">
                <el-form class="formSmall" label-width="200px">
                  <el-form-item label="指定Current Page 参数名称">
                    <el-input v-model="formData.pageNoParamName" style="width:300px;"></el-input>
                  </el-form-item>
                  <el-form-item label="指定Page Size 参数名称">
                    <el-input v-model="formData.pageSizeParamName" style="width:300px;"></el-input>
                  </el-form-item>
                </el-form>
              </el-form-item>
              <el-form-item label="最大请求频率">
                <el-switch v-model="formData.maxRequestFrequencyStatus" :inactive-value="0" :active-value="1"></el-switch>
              </el-form-item>
              <el-form-item v-if="formData.maxRequestFrequencyStatus===1">
                <el-input placeholder="请输入内容" v-model="formData.maxRequestFrequency" class="input-with-select" style="width:200px;">
                  <el-select v-model="formData.maxRequestFrequencyUnit" slot="append" placeholder="请选择">
                    <el-option label="小时" value="hour"></el-option>
                    <el-option label="分钟" value=" minute"></el-option>
                    <el-option label="秒" value="second"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item label="测试">
                <interfaceLink label="测试" :initData="formData"></interfaceLink>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="handeSave">提交</el-button>
                <el-button @click="handelCancel">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import { add, update } from "@/api/dataset/interface.js";
import interfaceListChoose from "./interfaceListChoose"
import interfaceLink from "./interfaceLink";
export default {
  components: {
    interfaceListChoose,
    interfaceLink
  },
  data() {
    return {
      // 数据库类型字典
      typeOptions: [
        {
          label: "数据源接口",
          value: 0
        },
        {
          label: "登录验证接口",
          value: 1
        }
      ],
      // 状态字典
      statusOptions: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "禁用",
          value: 2
        }
      ],
      // 请求方式
      requestWayOptions: [
        {
          label: "GET",
          value: "GET"
        },
        {
          label: "POST",
          value: "POST"
        },
        {
          label: "PUT",
          value: "PUT"
        },
        {
          label: "DELETE",
          value: "DELETE"
        }
      ],
      // 请求类型
      requestWaySmallOptions: [
        {
          label: "json",
          value: "json"
        },
        {
          label: "x-www-form-urlencoded",
          value: "x-www-form-urlencoded"
        },
        {
          label: "form-data",
          value: "form-data"
        }
      ],
      authenticationOptions: [
      ],
      // 表单配置
      formColumnBasic: [
        // {
        //   name: "datasourceName",
        //   label: "数据源名称",
        //   type: "input",
        //   span: 12
        // },
        // {
        //   name: "interfaceType",
        //   label: "数据源类型",
        //   type: "select",
        //   options: this.typeOptions,
        //   span: 12
        // },
        // {
        //   name: "interfaceUrl",
        //   label: "URL",
        //   type: "input",
        //   span: 12
        // },
        // {
        //   name: "requestMethod",
        //   label: "请求方式",
        //   type: "select",
        //   options: this.requestWayOptions,
        //   span: 12
        // },
        // {
        //   name: "datasourceDesc",
        //   label: "数据源描述",
        //   type: "textarea"
        // }
      ],
      formRulesBasic: {
        datasourceName: [{ required: true, message: "不能为空" }],
        interfaceType: [{ required: true, message: "不能为空" }],
        interfaceUrl: [{ required: true, message: "不能为空" }],
        requestMethod: [{ required: true, message: "不能为空" }],
        resultPath: [{ required: true, message: "不能为空" }]
      },
      formColumnParams: [
        // {
        //   name: "paramType",
        //   label: "参数名称",
        //   type: "select",
        //   options: [
        //     {
        //       label: "TOKEN",
        //       value: "TOKEN"
        //     },
        //     {
        //       label: "NORMAL",
        //       value: "NORMAL"
        //     }
        //   ]
        // },
        // {
        //   name: "paramName",
        //   label: "参数名称",
        //   type: "input"
        // },
        // {
        //   name: "paramValue",
        //   label: "参数值",
        //   type: "input"
        // },
        // {
        //   name: "paramDescription",
        //   label: "参数描述",
        //   type: "input"
        // }
      ],
      formColumnHeader: [],
      formData: {
        requestParams: [],
        requestHeader: []
      },
      activeName: "first",
      innerVisible: false,
      chooseObj: {
        id: "",
        name: "",
        value: ""
      }
    };
  },
  props: {
    databaseFormVisible: Boolean,
    initData: Object
  },
  watch: {
    initData(val) {
      // this.initData.requestParams = [];
      // this.initData.requestHeader = [];
      this.formData = Object.assign({}, {
        ...val
      });
      // this.initBasic = Object.assign({}, {
      //   ...val
      // });
      // this.$set(this, "formData", obj)
      // console.log("val", val);
      // console.log("this.formData", this.formData);
    }
  },
  methods: {
    initForm() {
      let _this = this;
      this.formColumnBasic = [
        {
          name: "datasourceName",
          label: "数据源名称",
          type: "input",
          span: 12
        },
        {
          name: "interfaceType",
          label: "数据源类型",
          type: "select",
          options: this.typeOptions,
          span: 12
        },
        {
          name: "interfaceUrl",
          label: "URL",
          type: "input",
          span: 24
        },
        {
          name: "requestMethod",
          label: "请求方式",
          type: "select",
          options: this.requestWayOptions,
          span: 12
        },
        {
          name: "mediaType",
          label: "请求类型",
          type: "select",
          options: this.requestWaySmallOptions,
          span: 12
        },
        {
          name: "datasourceDesc",
          label: "数据源描述",
          type: "textarea"
        },
        {
          name: "resultPath",
          label: "返回路径",
          type: "input"
        }
      ]
      this.formColumnParams = [
        {
          name: "paramType",
          label: "获取方式",
          type: "select",
          options: [
            {
              label: "动态获取",
              value: "1"
            },
            {
              label: "静态参数",
              value: "0"
            }
          ]
        },
        {
          name: "paramName",
          label: "参数名称",
          type: "input"
        },
        {
          name: "paramValue",
          chooseValue: "linkInterfaceId",
          chooseName: "linkInterfaceName",
          label: "值",
          type: "chooseOrInput",
          handleGetType: (row) => {
            return row.paramType === "1" ? "choose" : "input";
          },
          handelClick(id) {
            _this.handelChooseEvent(id);
          }
        }
        // {
        //   name: "paramDescription",
        //   label: "参数描述",
        //   type: "input"
        // }
      ]
      this.formColumnHeader = [
        {
          name: "headKeyType",
          label: "获取方式",
          type: "select",
          options: [
            {
              label: "动态获取",
              value: "1"
            },
            {
              label: "静态参数",
              value: "0"
            }
          ]
        },
        {
          name: "headerKey",
          label: "key",
          type: "input"
        },
        {
          name: "headerValue",
          chooseValue: "linkInterfaceId",
          chooseName: "linkInterfaceName",
          label: "值",
          type: "chooseOrInput",
          handleGetType: (row) => {
            return row.headKeyType === "1" ? "choose" : "input";
          },
          handelClick(id) {
            _this.handelChooseEvent(id);
          }
        }
      ]
    },
    handeSave() {
      let well = this.$refs.formBasic.validateForm();
      // let well2 = this.$refs.formAdvance.validateForm();
      if (!well) return false;
      // console.log("handle formData", formData);
      let saveEvent;
      if (this.initData && this.initData.id) {
        saveEvent = update;
      } else {
        saveEvent = add;
      }
      let obj = {
        ...this.formData
        // requestParams: this.formData.requestParams,
        // requestHeader: this.formData.requestHeader
      };
      saveEvent(obj)
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$message({
              message: data.msg || "操作成功",
              type: "success"
            });
            this.handelCancel();
          } else {
            // this.$message.error(data.msg);
            this.$message({
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(() => {
          // this.$message.error(error);
          this.$message({
            message: "操作失败",
            type: "error"
          });
        });
    },
    handelCancel() {
      this.$refs.formBasic.onCancel();
      this.$refs.formAdvance.clearValidate();
      this.$refs.formAdvance.resetFields();

      this.$emit("close");
    },
    close() {
      this.innerVisible = false;
    },
    handelChooseEvent(id) {
      this.chooseObj.id = id;
      this.innerVisible = true;
      // this.$emit("showChoose")
    },
    handelChoose(row) {
      // this.chooseObj = {
      //   ...this.chooseObj,
      //   ...obj
      // }
      // console.log("handelChoose", row);
      let obj = { value: row.id, name: row.datasourceName };

      let arr = this.chooseObj.id.split("_");
      if (arr[0].startWith("header")) {
        this.$refs.headerSet.setValueById(this.chooseObj.id, obj);
      } else if (arr[0].startWith("param")) {
        this.$refs.paramSet.setValueById(this.chooseObj.id, obj);
      }
      this.close();
    }
    // showChoose() {
    //   this.innerVisible  = true;
    // }
  },
  mounted() {
    if (this.initData) {
      this.formData = {
        ...this.initData
      };
    } else {
      this.formData = {};
    }
    // console.log(this.formData);
    this.initForm();
  }
};
</script>
<style lang="scss" scoped>
.interface {
  .el-divider__text.is-left {
    left: 0;
    display: flex;
    flex-direction: row;
    > i {
      display: block;
      width: 3px;
      height: 14px;
      background: #128df3;
      margin-right: 5px;
    }
  }
  .formBox {
    padding: 1rem 3rem;
  }
  .formSmall {
    .el-form-item {
      padding: 0.5rem 0;
    }
  }
}
</style>
<style lang="scss">
.interface {
  .input-with-select {
    .el-select .el-input {
      width: 130px;
    }
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
}
</style>
